<template>
  <div>
    <n-space style="padding-bottom: 10px;">
        <n-tag v-for="tag in tagList" v-model:checked="tag.checked" checkable @click="getPromptList">
           {{tag.label}}
        </n-tag>
    </n-space>
    <n-space style="margin-bottom: 10px">
        <n-input v-model:value="searchWord" placeholder="请输入提示词标题" style="width: 300px">
        </n-input>
        <n-button type="primary" @click="getPromptList">查询</n-button>
    </n-space>
    <div  >
        <n-data-table
            :columns="columns"
            :data="promptList"
            :loading="tableLoading"
        >
        </n-data-table>
    </div>
    <n-space justify="end" style="margin-top: 10px">
        <n-pagination
            :display-order="['quick-jumper', 'pages', 'size-picker']"
            :item-count="tableTotal"
            :page-size="paginationReactive.pageSize"
            :page-sizes="paginationReactive.pageSizes"
            show-quick-jumper
            show-size-picker
            :on-update:page-size="onPageSizeChange"
            :on-update:page="onPageChange"
        />
    </n-space>
  </div>
</template>

<script lang="ts" setup>
import {h, onMounted, reactive, ref} from 'vue'
import {promptControllerApi} from '@/api/prompt/prompt.api'
import {NButton, NTag} from "naive-ui";
import Bus from '@/components/file/box/GlobalUploader/utils/bus.js'

const promptList = ref<Array<any>>([])
const searchWord = ref('')
const tableLoading = ref(false)
const getPromptList = () =>{
    tableLoading.value = true
    const tags:any = []
    tagList.value.forEach((tag)=>{
        if(tag.checked){
            tags.push(tag.value)
        }
    })
    const data = {
        title: searchWord.value,
        tags: tags
    }
    promptControllerApi.getGptPrompt(data,{
        page: paginationReactive.page,
        pageSize: paginationReactive.pageSize
    }).then((res)=>{
        tableLoading.value = false
        if(res.code === 200){
            promptList.value = res.data.list
            const key = ref(0)
            promptList.value.forEach((item)=>{
                item.key = key.value
                key.value = key.value +1
            })
            tableTotal.value = res.data.count
        }
    }).catch((e: any) => {
        tableLoading.value = true
    })
}
const tableTotal = ref(0)

const paginationReactive = reactive({
    page: 1,
    pageSize: 5,
    pageSizes: [5,10]
})


const onPageChange = (page: number) => {
    paginationReactive.page = page
    getPromptList()
}
const onPageSizeChange = (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    getPromptList()

}

onMounted(()=>{
    getPromptList()
})


const tagList = ref([
    {
        label: '收藏',
        checked: false,
        value: 'favorite'
    },
    {
        label: '写作',
        checked: false,
        value: 'write'
    },
    {
        label: '文章/报告',
        checked: false,
        value: 'article'
    },
    {
        label: 'IT/编程',
        checked: false,
        value: 'code'
    },
    {
        label: 'AI',
        checked: false,
        value: 'ai'
    },
    {
        label: '生活质量',
        checked: false,
        value: 'living'
    },
    {
        label: '趣味知识',
        checked: false,
        value: 'interesting'
    },
    {
        label: '自主百科',
        checked: false,
        value: 'life skills'
    },
    {
        label: '心理/社交',
        checked: false,
        value: 'socail'
    },
    {
        label: '哲学/宗教',
        checked: false,
        value: 'philosophy'
    },
    {
        label: '发散思维',
        checked: false,
        value: 'mind'
    },
    {
        label: '教育学生',
        checked: false,
        value: 'pedagogy'
    },




    {
        label: '学术/教师',
        checked: false,
        value: 'academic'
    },
    {
        label: '游戏',
        checked: false,
        value: 'game'
    },
    {
        label: '工具',
        checked: false,
        value: 'tool'
    },
    {
        label: '终端/解释器',
        checked: false,
        value: 'terminal'
    },
    {
        label: '语言/翻译',
        checked: false,
        value: 'language'
    },
    {
        label: '辩论/演讲',
        checked: false,
        value: 'speech'
    },
    {
        label: '点评/品鉴',
        checked: false,
        value: 'reviews'
    },
    {
        label: '文本/词语',
        checked: false,
        value: 'words'
    },
    {
        label: '企业职位',
        checked: false,
        value: 'company'
    },
    {
        label: '医生',
        checked: false,
        value: 'doctor'
    },
    {
        label: '金融顾问',
        checked: false,
        value: 'finance'
    },
    {
        label: '投稿',
        checked: false,
        value: 'contribute'
    }
])


const columns = [
    {
        type: 'expand',
        renderExpand: (rowData:any) => {
            return `${rowData.promptDescription}`
        }
    },
    {
        title: '标题',
        key: 'promptTitle'
    },
    {
        title: '说明',
        key: 'promptRemark',
        width:400,
        ellipsis: {
            tooltip: true,
            lineClamp: 1
        }
    },
    {
        title: '标签',
        key: 'tags',
        width:200,
        render (rowData:any) {
            const tagLabel = rowData.tags.split(',').map((tagKey) => {
                return h(
                    NTag,
                    {
                        style: {
                            marginRight: '6px'
                        },
                        type: 'info',
                        bordered: false
                    },
                    {
                        default: () => tagKey
                    }
                )
            })
            return tagLabel
        }
    },
    {
        title: '操作',
        key: 'address',
        width:120,
        render (rowData:any) {
            return h(
                NButton,
                {
                    size: 'small',
                    onClick: () => {
                        Bus.emit('loadPrompt',rowData)
                    }
                },
                { default: () => '使用' }
            )
        }
    }
]


</script>
